<script setup>
import {Search} from '@element-plus/icons-vue'
import { reactive, ref, computed } from 'vue';
class Data{
  constructor(id,name,product,where){
    this.id = id
    this.name = name
    this.product = product
    this.where = where
  }
}

const drawer = ref(false)
const drawer2 = ref(false)
const changeIndex = ref('')
const search = ref('')
const tableData = reactive([new Data('1','名字1','产品1','地址1'),new Data('2','名字2','产品2','地址2')])
const filterTableData = computed(()=>
   tableData.filter(data=>!search.value||data.name.includes(search.value))
)

const newData = reactive(new Data())

const originData =  reactive(new Data())

const deleteData = index => tableData.splice(index,1)

const addData = () => {
  tableData.push({...newData})
  drawer.value = false
}

</script>
<template>
  <el-card class="body">
    <el-header class="header">
      <div class="title">
          <div class="color"></div>
          <span>地块管理</span>
          </div>
          <hr style="opacity: 0.3;">
         <div class="Search">
          <el-input
          style="width: 240px"
          placeholder="搜索一下"
          :prefix-icon="Search"
          v-model="search"
          />
          <el-button type="primary" class="Search_button">搜索</el-button>
          <el-button type="primary" class="add_button" @click="drawer = true">新增</el-button>
          
         </div>
    </el-header>
    <el-main>
      <el-table :data="filterTableData" style="width: 100%">
      <el-table-column header-align="center" align="center" prop="id" label="序号" />
      <el-table-column header-align="center" align="center" prop="name" label="名称"  />
      <el-table-column header-align="center" align="center" prop="product" label="主要产品" />
      <el-table-column header-align="center" align="center"  prop="where" label="地址"/>
      <el-table-column header-align="center" align="center"  label="操作">
        <template #default="scope">
          <div>
            <el-button  @click="deleteData(scope.$index)">删除</el-button>
            <el-button @click="
            drawer2 = true;
            originData = reactive({...tableData[scope.$index]});
            changeIndex = scope.$index;
            ">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    </el-main>
  </el-card>


  <el-drawer v-model="drawer" title="新增地块">
    <div class="item">序号</div><el-input v-model="newData.id"></el-input>
    <div class="item">名称</div><el-input v-model="newData.name"></el-input>
    <div class="item">主要产品</div><el-input v-model="newData.product"></el-input>
    <div class="item">地址</div><el-input v-model="newData.where"></el-input>

    <template #footer>
      <div>
        <el-button @click="addData">增加</el-button>
        <el-button @click="drawer = false">取消</el-button>
      </div>
    </template>
  </el-drawer>

  <el-drawer v-model="drawer2" title="编辑地块">
    <div class="item">序号</div><el-input v-model="originData.id"></el-input>
    <div class="item">名称</div><el-input v-model="originData.name"></el-input>
    <div class="item">主要产品</div><el-input v-model="originData.product"></el-input>
    <div class="item">地址</div><el-input v-model="originData.where"></el-input>

    <template #footer>
      <div>
        <el-button @click="
          tableData.splice(changeIndex.value,1,{...originData});
          drawer2 = false
          ">修改</el-button>
        <el-button @click="drawer2 = false">取消</el-button>
      </div>
    </template>
  </el-drawer>


</template>



<style scoped>
  @import url('./Area.css');
</style>